<template>
  <div class="book-card">
    <div class="main-book">
      <div class="header-book">
        <div class="image"></div>
      </div>
      <div class="body-book">
        <div class="title-book">{{ book.title }}</div>
        <div class="content-book">
          <div class="content-line">
            <div>{{ book.author }}</div>
            <div>{{ book.price }}</div>
          </div>
          <div class="content-line">
            <div>{{ book.publisher }}</div>
            <div>{{ book.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "BookCard",
  components: {
    // New,Old,
  },
  props: {
    height: {
      type: String,
    },
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      book: {
        id: 1,
        picUrl: "../assets/logo.png",
        title: "西游记",
        author: "吴承恩",
        price: 12.45,
        date: "2020-22-12",
        publisher: "青岛印刷厂",
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.book-card {
  width: 300px;
  height: 280px;
  background-color: #b6aa9a;
}
.main-book {
  display: flex;
  flex-direction: column;
  .header-book {
    .image {
      width: 100px;
      height: 100px;
      background-image: url("~@/assets/logo.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  .body-book {
    background-color: #d5f3e4;
    display: flex;
    flex-direction: column;
    flex: 1;
    .title-book {
      height: 60px;
    }
    .content-book {
      display: flex;
      flex-direction: column;
      flex: 1;
      .content-line {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
